<!DOCTYPE html>
<html>
<head>
    <title>第三人称3D博客</title>
    <style>
        body { margin: 0; overflow: hidden; }
        #info {
            position: absolute;
            top: 10px;
            left: 10px;
            color: white;
            font-family: Arial;
            font-size: 14px;
            background: rgba(0,0,0,0.7);
            padding: 8px;
            border-radius: 4px;
            pointer-events: none;
        }
        .modal {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0,0,0,0.3);
            z-index: 100;
        }
    </style>
</head>
<body>
    <div id="info">点击地面移动角色 | 点击路牌发现彩蛋</div>
    <div id="egg-modal" class="modal">
        <h2>🎉 发现彩蛋!</h2>
        <p>这是我的秘密花园</p>
        <button onclick="closeModal()">关闭</button>
    </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tweenjs/tween.js@18.6.4/dist/tween.umd.js"></script>

<script>
    let scene, camera, renderer, character;
    const clock = new THREE.Clock();
    let ground;
    const keys = {};
    let targetPosition = null;
    let moveTween = null;
    let isMoving = false;
    let moveSpeed = 0.1;
    let rotateSpeed = 0.05;

    // 初始化场景
    function init() {
        // 创建基础场景
        scene = new THREE.Scene();
        scene.background = new THREE.Color(0x87CEEB);
        
        // 第三人称相机
        camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
        camera.position.set(0, 2, -5); // 从背后跟随
        
        renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.shadowMap.enabled = true;
        document.body.appendChild(renderer.domElement);

        // 添加光照
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
        scene.add(ambientLight);
        
        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
        directionalLight.position.set(10, 20, 5);
        directionalLight.castShadow = true;
        scene.add(directionalLight);

        // 创建地面
        const groundGeometry = new THREE.PlaneGeometry(100, 100);
        const groundMaterial = new THREE.MeshPhongMaterial({ 
            color: 0x88ff88,
            side: THREE.DoubleSide
        });
        ground = new THREE.Mesh(groundGeometry, groundMaterial);
        ground.rotation.x = Math.PI / 2;
        ground.receiveShadow = true;
        scene.add(ground);

        // 创建角色
        createCharacter();
        createEnvironment();
        setupInteractions();
    }

    function createCharacter() {
        const body = new THREE.Group();
        
        // 身体（圆柱体）
        const bodyGeometry = new THREE.CylinderGeometry(0.5, 0.5, 1, 16);
        const bodyMaterial = new THREE.MeshPhongMaterial({ color: 0xff4444 });
        const bodyMesh = new THREE.Mesh(bodyGeometry, bodyMaterial);
        bodyMesh.position.y = 0.5;
        bodyMesh.castShadow = true;
        body.add(bodyMesh);
        
        // 头部（球体）
        const headGeometry = new THREE.SphereGeometry(0.5, 16, 16);
        const headMaterial = new THREE.MeshPhongMaterial({ color: 0xffaaaa });
        const headMesh = new THREE.Mesh(headGeometry, headMaterial);
        headMesh.position.y = 1.5;
        headMesh.castShadow = true;
        body.add(headMesh);
        
        character = body;
        scene.add(character);
    }

    function createEnvironment() {
        // 创建中央喷泉
        const fountainBase = new THREE.Mesh(
            new THREE.CylinderGeometry(3, 3, 0.5, 32),
            new THREE.MeshPhongMaterial({ color: 0x4499ff })
        );
        fountainBase.position.y = 0.25;
        scene.add(fountainBase);

        // 创建路牌
        createSignpost(new THREE.Vector3(10, 0, 0), "彩蛋1", 0xff0000);
        createSignpost(new THREE.Vector3(-10, 0, 0), "博客", 0x00ff00);

        // 添加树木
        for(let i = 0; i < 20; i++) {
            const tree = new THREE.Group();
            
            const trunk = new THREE.Mesh(
                new THREE.CylinderGeometry(0.3, 0.3, 2, 8),
                new THREE.MeshPhongMaterial({ color: 0x8B4513 })
            );
            trunk.position.y = 1;
            tree.add(trunk);
            
            const crown = new THREE.Mesh(
                new THREE.ConeGeometry(2, 5, 8),
                new THREE.MeshPhongMaterial({ color: 0x22aa22 })
            );
            crown.position.y = 4;
            tree.add(crown);
            
            tree.position.set(
                Math.random()*40-20,
                0,
                Math.random()*40-20
            );
            scene.add(tree);
        }
    }

    function createSignpost(position, text, color) {
        const signGroup = new THREE.Group();
        
        const post = new THREE.Mesh(
            new THREE.CylinderGeometry(0.2, 0.2, 3, 8),
            new THREE.MeshPhongMaterial({ color: 0xaaaaaa })
        );
        post.position.y = 1.5;
        signGroup.add(post);

        const sign = new THREE.Mesh(
            new THREE.PlaneGeometry(2, 1),
            new THREE.MeshPhongMaterial({
                color: color,
                transparent: true,
                opacity: 0.8
            })
        );
        sign.position.y = 3;
        sign.rotation.y = Math.PI/2;
        sign.userData = { type: 'sign', text: text };
        signGroup.add(sign);

        signGroup.position.copy(position);
        scene.add(signGroup);
    }
    function handleKeyboard() {
        isMoving = false;
        
        // 左右旋转 (A/D)
        if (keys['a']) {
            character.rotation.y += rotateSpeed;
            isMoving = true;
        }
        if (keys['d']) {
            character.rotation.y -= rotateSpeed;
            isMoving = true;
        }
    }
    function setupInteractions() {
        // 鼠标点击移动
        renderer.domElement.addEventListener('click', (event) => {
            const mouse = new THREE.Vector2(
                (event.clientX / window.innerWidth) * 2 - 1,
                -(event.clientY / window.innerHeight) * 2 + 1
            );
            
            const raycaster = new THREE.Raycaster();
            raycaster.setFromCamera(mouse, camera);
            const intersects = raycaster.intersectObjects([ground]);
            
            if (intersects.length > 0) {
                moveCharacterTo(intersects[0].point);
            }
        });
          // 键盘控制
          document.addEventListener('keydown', (event) => {
            keys[event.key.toLowerCase()] = true;
        });
        
        document.addEventListener('keyup', (event) => {
            keys[event.key.toLowerCase()] = false;
        });
    }

    function moveCharacterTo(target) {
        // 停止当前移动
        if (moveTween) moveTween.stop();
        
        // 计算距离和方向
        const distance = character.position.distanceTo(target);
        const duration = distance * 300; // 根据距离调整移动时间
        
        // 计算角色应该面对的方向
        const direction = new THREE.Vector3()
            .subVectors(target, character.position)
            .normalize();
        const targetRotation = Math.atan2(direction.x, direction.z);
        
        // 旋转角色
        new TWEEN.Tween(character.rotation)
            .to({ y: targetRotation }, 200)
            .start();
        
        // 移动角色
        moveTween = new TWEEN.Tween(character.position)
            .to({ x: target.x, z: target.z }, duration)
            .easing(TWEEN.Easing.Quadratic.InOut)
            .start();
        
        targetPosition = target;
    }

    function updateCamera() {
        // 第三人称跟随相机
        if (character) {
            // 计算相机理想位置（角色后方偏上）
            const idealPosition = new THREE.Vector3(0, 3, -5);
            idealPosition.applyQuaternion(character.quaternion);
            idealPosition.add(character.position);
            
            // 平滑移动相机
            camera.position.lerp(idealPosition, 0.1);
            camera.lookAt(character.position.x, character.position.y + 1, character.position.z);
        }
    }

    function handleSignClick(sign) {
        document.getElementById('egg-modal').style.display = 'block';
        setTimeout(() => {
            document.getElementById('egg-modal').style.display = 'none';
        }, 3000);
    }

    function closeModal() {
        document.getElementById('egg-modal').style.display = 'none';
    }

    // 动画循环
    function animate() {
        requestAnimationFrame(animate);
        
        TWEEN.update();
        handleKeyboard();
        updateCamera();
        
        renderer.render(scene, camera);
    }

    window.addEventListener('resize', () => {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    });

    init();
    animate();
</script>
</body>
</html>